<template>
	<view>
		<button @tap="toBrowser('https://m.baidu.com')" style="margin-top: 30upx;">打开百度</button>
		<button @tap="toBrowser('https://xw.qq.com')" style="margin-top: 30upx;">打开腾讯</button>
		<view v-if="loading">
			<text class="title">{{conf.title}}</text>
			<uni-load-more color="#007AFF" status="loading" />
		</view>
		<view v-else>
			<web-view :webview-styles="webviewStyles" :src="conf.path"></web-view>
		</view>
	</view>
</template>

<script>
	import browser from '../../libs/browser.js'
	
	let timer = null;
	export default {
		data() {
			return {
				title: 'Hello',
				webviewStyles: {
					progress: {
						color: '#FF3333'
					}
				},
				pathEnum: {
					a :'https://www.dilidili4.com',
					b :'https://www.jnjls.net',
					c :'https://www.sjzhcheng.com',
				},
				titleEnum: {
					a: '看全网',
					b: '备选路线1',
					c: '备选路线2',
				},
				loading: true
			}
		},
		computed: {
			conf() {
				const res = this.matchPath(location.href)
				
				return {
					path: this.pathEnum[res] || this.pathEnum.c,
					title: this.titleEnum[res] || this.titleEnum.c
				}
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			init(){
				if(timer){
					this.clearTimer()
				}
				
				timer = setTimeout(() => {
					this.loading=false
					this.toBrowser(this.conf.path)
				}, 2500);
				
				console.log(this.loading,'loading')
			},
			clearTimer() {
				if (timer) {
					clearTimeout(timer);
					timer = null;
				}
			},
			matchPath(url, name='path') {
				const regex = new RegExp(name + '=([^&]+)');
				const match = regex.exec(url)
				
				return match ? decodeURIComponent(match[1]) : null
			},
			toBrowser(url){
				try{
					browser.init({
						'data': '123'
					})
					
					browser.show(url)
				}catch(e){
					//TODO handle the exception
				}
			}
		},
		beforeUnmount() {
			// clearTime
			this.clearTimer();
		},
	}
</script>

<style>
</style>